<template>
    <el-menu
            class="categories"
            default-active="0"
            active-text-color="#00caa8"
            @select="handleSelect"
            :default-openeds="openedMenus"
    >
        <el-menu-item index="0">
            <i class="el-icon-menu"></i>
            <span slot="title">全部</span>
        </el-menu-item>
        
        <!-- 一级分类菜单 -->
        <el-submenu 
            v-for="parentItem in parentCategories" 
            :index="parentItem.id.toString()" 
            :key="parentItem.id"
        >
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ parentItem.categoryName }}</span>
            </template>
            
            <!-- 二级分类菜单 -->
            <el-menu-item 
                v-for="childItem in parentItem.children" 
                :index="childItem.id.toString()" 
                :key="childItem.id"
            >
                <i class="el-icon-menu"></i>
                <span slot="title">{{ childItem.categoryName }}</span>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "SideMenu",
        data(){
            return{
                cid: '0',
                parentCategories: [],
                openedMenus: []
            }
        },
        mounted() {
            this.loadCategoryTree();
        },
        methods:{
            // 加载分类树
            async loadCategoryTree() {
                try {
                    const resp = await this.$axios.get("/category/tree");
                    if (resp && resp.status === 200) {
                        const categories = resp.data.data || resp.data;
                        this.parentCategories = categories;
                        
                        // 为每个父分类加载子分类
                        await this.loadChildrenCategories();
                        
                        // 设置默认展开的菜单
                        this.openedMenus = this.parentCategories.map(item => item.id.toString());
                    }
                } catch (error) {
                    console.error('获取分类树失败:', error);
                }
            },
            
            // 加载子分类
            async loadChildrenCategories() {
                for (let parent of this.parentCategories) {
                    try {
                        const resp = await this.$axios.get(`/category/children/${parent.id}`);
                        if (resp && resp.status === 200) {
                            const children = resp.data.data || resp.data;
                            // 使用Vue.set确保响应式更新
                            this.$set(parent, 'children', children);
                        }
                    } catch (error) {
                        console.error(`获取子分类失败 (parentId: ${parent.id}):`, error);
                        // 如果获取子分类失败，设置空数组
                        this.$set(parent, 'children', []);
                    }
                }
            },
            
            handleSelect(index){
                this.cid = index;
                this.$emit('indexSelect', index);
            }
        }
    }
</script>

<style>
.categories .el-menu-item {
  text-align: left;
}

.categories .el-menu-item span {
  text-align: left;
}

.categories .el-submenu .el-menu-item {
  text-align: left;
  padding-left: 40px !important;
}

.categories .el-submenu .el-submenu__title {
  text-align: left;
}

.categories .el-submenu .el-submenu__title span {
  text-align: left;
}
</style>